<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的订单</title>
    <link rel="icon" href="/img/milogo.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/CSS/currency.css"/>
    <link rel="stylesheet" type="text/css" href="/CSS/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/CSS/order.css"/>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
</head>
<body>
<th:block th:include="header"/>
<div class="title">
    <div class="container">
        <a href="/">首页</a> / 我的订单
    </div>
</div>
<div class="profile-box">
    <div class="container clearfix">
        <th:block th:include="leftMenu"/>

        <div class="fl profile-right">    <!-- 右侧 -->
            <div class="infor-box">
                <div class="order-title">
                    <h1>我的订单</h1>
                    <span>请谨防钓鱼链接或诈骗电话，了解更多></span>
                </div>

                <div class="clearfix">

                    <ul class="content-title clearfix">
                        <li id='0' sname="" class="act">全部有效订单</li>
                        <li id='1' sname="待支付">待支付</li>
                        <li id='2' sname="待发货">待收货</li>
                        <li id='3' sname="已发货">已发货</li>
                        <li id='4' sname="已完成">已完成</li>
                    </ul>

                    <div class="content-search fr">
                        <input id="search-input" class="acti" type="text" placeholder="输入商品名称、订单号"/>
                        <span id="search-btn" class="iconfont icon-chazhaosousuo"></span>
                    </div>

                    <ul class="content">
                        <li class="act" id="orderLI">


                        </li>
                    </ul>
                    <div id="pageDIV" class="order-rotate">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="orderTemplate" type="text/html">
    {{# layui.each(d,function(index,item){     }}
    <div class="order">
        <div class="order-content-title">
            <div class="content-wait">{{=item.status}}</div>
            <div class="content-des clearfix">
                <span>{{=item.orderTime}}</span>
                <span>|</span>
                <span>张三</span>
                <span>|</span>
                <span>订单号：<a href="">{{=item.code}}</a></span>
                <span>|</span>
                <span>{{=item.payType}}</span>
                <div class="cope fr">应付金额：<b>{{=item.totalPrice}}</b>元</div>
            </div>
        </div>

        <div class="order-content-details clearfix">
            {{# layui.each(item.details,function(i,v){ }}
            <div style="display: block!important;">
                <div class="details-img fl">
                    <img width="70px" height="70px" src="{{=v.imgPathShow}}">
                </div>
                <div class="details-title fl">
                    <div>{{=v.name +' '+v.edition+' '+v.color}}</div>
                    <div>{{=v.price}}元 × {{=v.amount}}</div>
                </div>
            </div>
            {{# }) }}
            <div class="details-button fr">
                <button type="button">订单详情</button>
                {{# if(item.status==="待支付"){ }}
                <button class="details-buy" type="button"><a href="/order/pay?id={{=item.id}}">立即付款</a></button>
                {{# } }}
            </div>
        </div>

    </div>

    {{#  })  }}
</script>

<th:block th:include="footer"/>
<script src="/JS/currency.js"></script>
<script src="/layui/layui.js"></script>
<script>
    layui.use(["laypage", "laytpl"], function () {
        var laypage = layui.laypage;
        var $ = layui.jquery;
        var laytpl = layui.laytpl;

        var limit = 5;//默认每页10条
        var page = 1;//默认打开第一页


        $("#search-btn").on("click", function () {
            var status = $(".content-title li.act").attr("sname");
            var keyword = $("#search-input").val();
            $.get("/personal/orderList?status="+status+"&keyword="+keyword+"&limit=" + limit + "&page=" + page, function (orders) {
                laytpl($("#orderTemplate").html()).render(orders.data, function (a) {
                    $("#orderLI").html(a);
                });
                laypage.render({
                    elem: 'pageDIV',
                    count: orders.count, // 数据总数,
                    curr: page,
                    limit: limit,
                    prev:"<",
                    next:">",
                    theme:"#757575",
                    jump:function(obj, first){
                        if(!first){
                            console.log(obj.curr);
                            page = obj.curr;
                            $("#search-btn").click();
                        }
                    }
                });
            });
        });

        $("#search-btn").click();

        $(".content-title li").on("click",function(){
            $(this).addClass("act").siblings().removeClass("act");
            $("#search-btn").click();
        });
    })
</script>
</body>
</html>
